<template>
  <a-card size="small">
    <div slot="title">
      <a-button
        type="primary"
        @click="addNewRole"
        v-permission="{action:'add', effect:'disabled'}"
        size="small"
      >
        <a-icon type="plus" />新增角色
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="roleData"
      bordered
      rowKey="_id"
      size="small"
      :pagination="false"
    >
      <span slot="roleNameTag" slot-scope="roleTags">
        <a-tag color="blue">{{ roleTags}}</a-tag>
      </span>
      <span slot="authShow" slot-scope="auth">
        <a-tag color="green" v-for="item in auth" :key="item._id">{{ item}}</a-tag>
      </span>
      <span slot="action" slot-scope="userInfo">
        <a-button
          type="primary"
          @click="setRoleAuth(userInfo)"
          size="small"
          v-permission="{action:'edit', effect:'disabled'}"
        >设置角色权限</a-button>
        <a-divider type="vertical" />
        <a-popconfirm
          title="确定删除？"
          ok-text="是"
          cancel-text="否"
          @confirm="sureDelete(userInfo)"
          @cancel="cancelDelete"
        >
          <a-button
            type="primary"
            v-permission="{action:'delete', effect:'disabled'}"
            size="small"
          >删除</a-button>
        </a-popconfirm>
      </span>
    </a-table>

    <div class="pagination">
      <a-pagination
        size="small"
        :total="this.total"
        show-size-changer
        show-quick-jumper
        :defaultPageSize="this.pageSize"
        :pageSizeOptions="['2','5','10','15']"
        :show-total="total => `共${this.total}条`"
        @change="currentSizeData"
        @showSizeChange="changeSize"
      />
    </div>
    <AddNewRole ref="addRoleModal" @refreshTable="refreshTable" />
    <SetRoleAuth
      ref="setRoleModal"
      :curRoleMenuAuth="curRoleMenuAuth"
      :curRoleBtnAuth="curRoleBtnAuth"
      :curRoleName="curRoleName"
      :curRoleId="curRoleId"
      @refreshRoleTable="refreshRoleTable"
    />
  </a-card>
</template>

<script>
import { getAllRoles, deleteRole, addRole } from '@/network/role.js'
import { formateDate } from '@/utils/dateUtils.js'

import AddNewRole from './AddNewRole'
import SetRoleAuth from './SetRoleAuth'

const columns = [
  {
    title: '角色名称',
    dataIndex: 'name',
    align: 'center',
    scopedSlots: { customRender: 'roleNameTag' },
  },
  {
    title: '菜单权限',
    dataIndex: 'menus',
    align: 'center',
    scopedSlots: { customRender: 'authShow' },
  },
  {
    title: '按钮权限',
    dataIndex: 'rights',
    align: 'center',
    scopedSlots: { customRender: 'authShow' },
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    align: 'center',
    customRender: formateDate
  },
  {
    title: '授权时间',
    dataIndex: 'auth_time',
    align: 'center',
    customRender: formateDate
  },
  {
    title: '操作',
    align: 'center',
    width: '200px',
    scopedSlots: { customRender: 'action' }
  },
];

export default {
  name: 'roleManager',
  data () {
    return {
      roleData: [],
      columns,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      curRoleId: '',   //保存当前角色的id
      curRoleName: '',   //保存当前角色名称
      curRoleMenuAuth: [], //保存当前角色已有的菜单权限
      curRoleBtnAuth: [], //保存当前角色已有的按钮权限
    };
  },
  components: {
    AddNewRole,
    SetRoleAuth
  },
  computed: {

  },
  mounted () {
    this.getAllRoles(this.pageNum, this.pageSize)
  },
  methods: {
    //获取所有角色列表
    async getAllRoles (pageNum, pageSize) {
      const rolesInfos = await getAllRoles(pageNum, pageSize)
      console.log(rolesInfos)
      if (rolesInfos.status == 200) {
        this.total = rolesInfos.data.data.total
        this.roleData = rolesInfos.data.data.list
      }
    },
    //删除一个角色
    sureDelete (roleInfo) {
      console.log(roleInfo)
      deleteRole(roleInfo._id).then(res => {
        if (res.data.status === 200) {
          this.$message.success(res.data.msg)
          //删除角色之后重新获取所有角色
          this.getAllRoles(this.pageNum, this.pageSize)
        }
      })
    },
    //取消删除
    cancelDelete () {
      this.$message.success('取消删除成功')
    },
    //点击页码重新发起请求
    currentSizeData (currentPage, pageSize) {
      this.pageNum = currentPage
      this.getAllRoles(this.pageNum, this.pageSize)
    },
    //改变页码时，重新获取数据
    changeSize (current, size) {
      this.pageSize = size
      this.getAllRoles(current, this.pageSize)
    },
    //显示添加角色的addRoleModal
    addNewRole () {
      this.$refs.addRoleModal.show()
    },
    //更新完页面之后，关闭addRoleModal，刷新table
    refreshTable () {
      this.getAllRoles(this.pageNum, this.pageSize)
    },
    //显示设置角色权限的modal
    setRoleAuth (curRoleInfo) {
      console.log(curRoleInfo)
      this.curRoleId = curRoleInfo._id
      this.curRoleName = curRoleInfo.name
      this.curRoleMenuAuth = curRoleInfo.menus
      this.curRoleBtnAuth = curRoleInfo.rights
      this.$refs.setRoleModal.show()
    },
    //更新完页面之后，关闭addRoleModal，刷新table
    refreshRoleTable () {
      this.getAllRoles(this.pageNum, this.pageSize)
    }
  },

};
</script>

<style scoped>
/* 分页位置 */
.pagination {
  margin-top: 15px;
  float: right;
}
</style>
